<template>
  <div class="search-container">
    <a-input-search
      v-model:value="searchValue"
      placeholder="请输入虎牙账号"
      style="width: 300px; margin-right: 10px;"
      @search="getList(1)"
    />
    <a-select
      ref="select"
      v-model:value="searchSelect"
      style="width: 120px; margin-right: 10px;"
    >
      <a-select-option
        value=""
      >
        全部
      </a-select-option>
      <a-select-option
        :value="1"
      >
        卡爷
      </a-select-option>
      <a-select-option
        :value="2"
      >
        反续费
      </a-select-option>
    </a-select>
    <a-button
      @click="getList(1)"
      type="primary"
      style="margin-right: 10px;"
    >
      查询
    </a-button>
    <a-button
      @click="reset()"
      type="default"
    >
      重置
    </a-button>
  </div>
  <a-table
    class="table"
    bordered
    :data-source="tableData"
    :columns="tableColumns"
    :loading="tableLoading"
    :pagination="tablePagination"
    row-key="id"
    @change="pageChange"
  >
    <template #type="{ text }">
      {{ text === 1 ? '卡爷' : '反续费' }}
    </template>
    <template #applyImg="{ text }">
      <a-image
        :width="100"
        :src="text"
        class="table-img"
        fallback=""
      />
    </template>
    <!-- 状态  0 未审核  1 审核成功 2 审核失败 -->
    <template
      #action="{ record }"
      class="table-btn-group"
    >
      <section v-show="record.status === 0 || record.status === 1">
        <a-button
          :disabled="record.status === 1"
          type="primary"
          @click="audit(record.id, 1)"
        >
          通过审核
        </a-button>
        <a-divider
          style="margin: 0 10px;"
          type="vertical"
        />
        <a-button @click="audit(record.id, 2)">
          拒绝审核
        </a-button>
      </section>
      <a-tag
        v-show="record.status === 2"
        color="error"
      >
        审核不通过
      </a-tag>
    </template>
  </a-table>
  <div />
</template>

<script lang='ts' setup>
import { ref, inject, onMounted } from 'vue'
import { getListAPI, auditAPI } from '../../api/search'

const ctx: any = inject('$message') // message 挂载
// 绑定搜索
const searchValue = ref('') // 搜索值
const searchSelect = ref('') // select 枚举固定 卡爷/反续费
const tableLoading = ref(false) // 表格 loading
const tableData = ref([]) // 表格列
const tablePagination = ref({ // 分页
  current: 1,
  pageSize: 10,
  total: 0
})

const tableColumns = ref([
  {
    title: '序号',
    dataIndex: 'id',
    align: 'center'
  },
  {
    title: '类型',
    dataIndex: 'type',
    align: 'center',
    slots: { customRender: 'type' }
  },
  {
    title: '虎牙账号',
    dataIndex: 'huya',
    align: 'center'
  },
  {
    title: '微信账号',
    dataIndex: 'contact',
    align: 'center'
  },
  {
    title: '申请爷牌截图',
    dataIndex: 'screen_typing_img',
    align: 'center',
    slots: { customRender: 'applyImg' }
  },
  {
    title: '个人信息页截图',
    dataIndex: 'person_info_img',
    align: 'center',
    slots: { customRender: 'applyImg' }
  },
  {
    title: '周贡300截图',
    dataIndex: 'week_img',
    align: 'center',
    slots: { customRender: 'applyImg' }
  },
  {
    title: '反续费截图',
    dataIndex: 'anchor_img',
    align: 'center',
    slots: { customRender: 'applyImg' }
  },
  {
    title: '操作',
    dataIndex: 'status',
    align: 'center',
    slots: { customRender: 'action' }
  }
]) // 表格列

// 获取表格数据
const getList = (page: number) => {
  tableLoading.value = true
  const body = {
    page_size: tablePagination.value.pageSize,
    page: page,
    huya: searchValue.value,
    type: searchSelect.value
  }
  getListAPI(body).then(res => {
    if (res.code === 200) {
      tableData.value = res.data.data // 赋值
      tablePagination.value.current = res.data.current_page
      tablePagination.value.total = res.data.total
    } else {
      ctx.error('获取列表失败')
    }
    tableLoading.value = false
  })
}
// 重置
const reset = () => {
  searchValue.value = ''
  searchSelect.value = ''
  getList(1)
}
// 分页触发
const pageChange = (pagination: any) => {
  tablePagination.value.current = pagination.current
  getList(tablePagination.value.current)
}
// 审核
const audit = (id: number, status: number) => {
  const body = {
    id: id,
    status: status
  }
  auditAPI(body).then(res => {
    if (res.code === 200) {
      ctx.success(`审核${status === 1 ? '通过' : '拒绝'}成功`)
      getList(tablePagination.value.current)
    } else {
      ctx.error('审核操作失败')
    }
  })
}
// 加载
onMounted(() => {
  getList(1)
})

</script>

<style scoped>
 .table {
  margin-top: 20px;
}
.search-container .table-img {
  cursor: pointer;
}
</style>
